<template>
  <div class="authentication">
    <el-dialog
      :modal-append-to-body='false'
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <h1>实名认证</h1>
      <div class="authentication-content">
        <span>
          根据文化部《网络游戏管理暂行版本》的相关要求，网络游戏用户需要使用有效身份证件进行实名注册才能登录游戏
        </span>
        <div>
          <el-input v-model="name" placeholder="请输入真实姓名"></el-input>
          <el-select v-model="certificateType" @change="change($event)">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.text"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="cardNums" placeholder="请输入身份证号码"></el-input>
        </div>
        <button v-if="!name || !certificateType || !cardNums" class="submitFalse">提交</button>
        <button v-else class="submitTrue" @click="submit">提交</button>
        <span class="instruction">信息仅用于认证且绝对保密，未实名认证的用户不允许充值</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'authentication',
  props: ['dialogVisible'],
  data () {
    return {
      // dialogVisible: true,
      name: '',
      certificateType: '1',
      cardNums: '',
      options: [
        {value: '1', text: '身份证'}
      ]
    }
  },
  computed: {
    actionStatus () {
      return this.$store.state.actionStatus
    },

    failMsg () {
      return this.$store.state.failMsg
    }
  },
  watch: {
    failMsg () {
      this.failMsg && this.Toast(this.failMsg, 500)
    },
    actionStatus () {
      if (this.actionStatus) {
        this.actionStatus && this.Toast('成功', 500)
        setTimeout(() => {
          this.handleClose()
        }, 5000)
      }
    }
  },
  methods: {
    // 关闭实名认证
    handleClose () {
      this.dialogVisible = false
    },
    change (e) {
      this.certificateType = e
    },
    // 提交
    submit () {
      let name = /^[\u4e00-\u9fa5]{0,}$/
      let cardNums = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      if (!name.test(this.name)) {
        this.Toast('请输入正确的真实姓名', 500)
        return false
      } else if (!cardNums.test(this.cardNums)) {
        this.Toast('请输入正确的身份证号码', 500)
        return false
      } else {
        this.$store.dispatch('setIdentify', {
          realname: this.name,
          type: this.certificateType,
          idcard: this.cardNums
        })
      }
    }
  },
  created () {
  }
}
</script>

<style lang="scss" scoped>
.authentication {
  /deep/ .el-dialog {
    width: 8.35rem;
    height: 8.88rem;
    background: #FFFFFF;
    border-radius: 0.16rem;
    margin: 0;
    margin-left: 0.82rem;
    margin-bottom: 4.45rem;

    h1 {
      font-size: 0.45rem;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #2E2E2E;
      margin-bottom: 0.25rem;
      text-align: center;
    }

    .authentication-content {
      width: 7.12rem;
      margin: auto;
      word-wrap: break-all;
      word-break: normal;
      // overflow: scroll;

      /deep/ .el-input__inner {
        font-size: 0.32rem;
      }

      > span {
        font-size: 0.32rem;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #999999;
        line-height: 0.5rem;
      }

      > div {
        * {
          height: 1.2rem;
          border: none;
        }
      }

      > button {
        margin-top: 0.4rem;
      }

      .instruction {
        display: block;
        font-size: 0.27rem;
        margin-top: 0.15rem;
      }
    }

    .submitFalse {
      width: 7.12rem;
      height: 1.01rem;
      background: #D8D8D8;
      border-radius: 0.51rem;
      font-size: 0.4rem;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #FFFFFF;
    }

    .submitTrue {
      width: 7.12rem;
      height: 1.01rem;
      background: #D8D8D8 linear-gradient(90deg, #FF0000 0%, #FFD500 100%);
      border-radius: 0.51rem;
      font-size: 0.4rem;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #FFFFFF;
    }
  }

  /deep/ .el-select {
    width: 100%;
  }

  /deep/ .el-icon-close:before {
    width: 0.4rem;
    height: 0.43rem;
  }

  /deep/ .el-dialog__header {
    padding: 0;
  }

  /deep/ .el-dialog__body {
    padding: 0.5rem 0.61rem;
  }

  /deep/ .el-dialog__wrapper {
    top: auto;
  }
}
</style>
